<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Plan PreAdd</title>
        <#include "../../inc/css.ftl">
		<link rel="stylesheet" href="${request.contextPath}/static/asset/jquery-ui/1.11.2/jquery-ui.min.css">
		<link rel="stylesheet" href="${request.contextPath}/static/asset/jquery-ui/1.11.2/jquery-ui.theme.min.css">
		<link rel="stylesheet" href="${request.contextPath}/static/asset/jquery/jquery.autocomplete/jquery.autocomplete.css">
		<style>
		.table tr:hover{
			background:#ccc;
		}
		</style>
	</head>
	<body class="no-skin">
		<div class="container-fluid">
			<div class="row">
			  <div class="breadcrumbs">
				<ul class="breadcrumb">
					<li><i class="ace-icon fa fa-home home-icon"></i><a href="${request.contextPath}/index.jspx" target="_top">首页</a></li>
					<li><a href="list.jspx">生产管理</a></li>
					<li><a href="list.jspx">生产计划信息</a></li>
					<li class="active">新增</li>
				</ul>
				  <!-- /.breadcrumb -->
			  </div>
			  <!-- /.breadcrumbs -->
			</div>
			<!-- /.row -->
			<div class="row">
				<div class="page-content">
					<div class="page-header">
						<h1>生成计划信息新增</h1>
					</div>
					<div class="row">
						<div class="col-xd-12">
						    <form action="add.jspx" method="post" class="form-horizontal" role="form" id="form-data">
						    	<div class="form-group">
						    		<div class="col-sm-5">
						    			计划生产长度：<input type="text" size="15" id="plan_num" name="planNum" placeholder="输入计划生产长度" value="1000"/>米
						    		</div>									
									<div class="col-sm-4 pull-right">
										流程编号：<input type="text" id="code" name="code" placeholder="编号" value="${code}"/>
										<input type="hidden" name="oldId" value="0">
									</div>
								</div>
								<div class="form-group">
									<table style="width:100%; text-align:center; border-collapse:collapse" border="1">
										<tr>
											<td rowspan="2">型号</td>
											<td><input type="text" id="material_code" name="materialCode" style="border:0" placeholder="请输入物料号" class="form-control"></td>
											<td>开始日期</td> 
											<td>结束日期</td>
                                            <td>任务要求</td>
										</tr>
										<tr>
											<td id="material_name">&nbsp;</td>
											<td><input type="text" id="startDate" name="startDate" class="datepicker"  value="${startDate}"></td>
											<td><input type="text" id="finishDate" name="finishDate" class="datepicker" value="${endDate}"></td>
											<td>
												<select name="type">
													<option value="normal" selected>正常</option>
													<option value="urgent">紧急</option>
												</select>
											</td>
										</tr>
									</table>
								</div>
								<div class="form-group">
									<div id="info_show"></div>
									<table class="table" border="1">
											<thead>
												<tr>
													<td>序号</td>
													<td>工序</td>
													<td>物料代号</td>
													<td>规格型号</td>
													<td>描述</td>
													<td>数量</td>
													<td>单位</td>
													<td>工位</td>
													<td>完成日期</td>
													<td>备注</td>
												</tr>
											</thead>
											<tbody id="detail_container">
											</tbody>
											<script type="text/html" id="plan_detail">
												<tr id="detail_{{index}}">
													<td>{{index+1}}</td>
													<td>
													    <input type="hidden" name="preProcess_{{index}}" value="{{processInfo.preProcess}}">
													    <input type="hidden" name="process_{{index}}" value="{{processInfo.name}}">{{processInfo.name}}</td>
													    <input type="hidden" name="nextProcess_{{index}}" value="{{processInfo.nextProcess}}">
													<td>
														<input type="hidden" name="destCode_{{index}}" value="{{processInfo.destCode}}">
														<input type="hidden" name="destModel_{{index}}" value="{{processInfo.destModel}}">
														<input type="hidden" name="deep_{{index}}" value="{{processInfo.deep}}">
														<input type="hidden" name="orderid_{{index}}" value="{{processInfo.orderid}}">
														<input type="hidden" name="materialCode_{{index}}" value="{{processInfo.code}}">
													    {{processInfo.code}}    
													</td>
													<td>
													    <input type="hidden" name="materialModel_{{index}}" value="{{processInfo.model}}">
													{{processInfo.model}}</td>
													<td><input type="text" id="desc_{{index}}" name="materialDesc_{{index}}" size="10" value="{{processInfo.desc}}"></td>
													<td><input type="text" id="needTotal_{{index}}" name="needTotal_{{index}}" size="6" value="{{processInfo.totalNum}}"></td>
													<td>
													    <input type="hidden" name="unit_{{index}}" value="{{processInfo.unit}}">
													    {{processInfo.unit}}
													</td>
													<td>
														<select class="station" name="station_{{index}}">
															<option value="0">待分配</option>
														<#list stations as station>
														   <option value="${(station.id)!0}">${(station.name)!''}</option>
														</#list>
														</select>
													</td>
													<td><input type="text" name="finishDate_{{index}}" class="datepicker" size="12" value="${endDate}"></td>
													<td><input type="text" name="memo_{{index}}" value="{{processInfo.description}}"></td>s
												</tr>
										</script>
										</table>
								</div>
								<div class="space-4"></div>
								<div class="form-group">
									<div>
										<a id="find_stock" href="" target="_blank" style="display:none">查看BOM相关的库存</a>
									<div>
									<div>
										<input type="hidden" name="current_id" id="current_id" value="0">
										<input type="hidden" id="last_code">
									</div>
								</div>
								
								<div class="clearfix form-actions">
									<div class="col-sm-offset-2 col-sm-4">
										<button type="reset" class="btn">
											<i class="ace-icon fa fa-undo bigger-110"></i>
											重置
										</button>
										&nbsp;&nbsp;
										<button id="plan-submit" type="submit" class="btn btn-info">
											<i class="ace-icon fa fa-check bigger-110"></i>
											提交
										</button>
									</div>
								</div>
						    </form>
					    </div>
					</div>
					<!-- /.row -->
				</div>
				<!-- /.page-content -->
			</div>
		</div>
		<#include "../../inc/js.ftl">
		<script src="${request.contextPath}/static/asset/jquery-ui/1.11.2/jquery-ui.min.js"></script>
		<script src="${request.contextPath}/static/asset/jquery/jquery.autocomplete/jquery.autocomplete.min.js"></script>
		<script src="${request.contextPath}/static/asset/jquery/template.js"></script>
		<script src="${request.contextPath}/static/skin/default/js/product-list.js"></script>
		<script>
			$(document).ready(function(){
				product.Plan.setCtx("${request.contextPath}");
				product.Plan.init();
				root.Validator.Plan.validate();
				
				product.Plan.findBom({ctx:"${request.contextPath}"});
				product.Plan.datepicker('.datepicker');
				
			});
			product.Plan.findBom=function(options){
				$("#material_code").autocomplete({
					serviceUrl:options.ctx+"/repo/material/listAutoModel.jspx?format=json&action=b",
					formatResult:function(suggestion,currentValue){
						return suggestion.value+" - "+suggestion.data;
					},
					width:400,
					onSelect:function(selectValue){
						var code = selectValue.value;
						var $lastCode = $('#last_code');
						
						if(code!=null && $lastCode.val()!=code){
							var $detailContainer=$("#detail_container");
							    $detailContainer.empty();
							   
							$.get(options.ctx+"/repo/bom/findBom.jspx?format=json&action=o",{code:code},function(data){
								if(data!==undefined && data.materialBom!==undefined){
									$("#material_name").html(data.materialBom.model);
									$("#material_model").html(data.materialBom.model);
									
									var $planNum = $('#plan_num'),
									    planNum=$planNum.val();
									if(planNum===undefined || planNum<=0){
										alert("请输入生产计划长度");
										$planNum.focus();
									}else{
									    product.Plan.getBomTree({ctx:options.ctx,code:code,planNum:planNum});
									}
								}else{
									alert("未找到BOM信息！");
								}
								
							});
							
							$lastCode.val(code);
						}
					}
				});
			};

			product.Plan.getBomTree=function(options){
				var $infoShow = $('#info_show');
				$infoShow.html('<span style="color:green">计算生产计划中，请等待....</span>').show();
				$.get(options.ctx+"/repo/bom/findBom.jspx?format=json&action=tree",{code:options.code,planNum:options.planNum},function(data){
					if(data!==undefined){
						var processInfos = data.processInfos;
						$('#current_id').val(processInfos.length);
						if(processInfos!=null){
							var $planTemplate = $("#plan_detail"),
							    $detailContainer=$("#detail_container");
							    //$detailContainer.empty();
							$.each(processInfos,function(index,processInfo){
								var dataContainer = template('plan_detail',{index:index,processInfo:processInfo});
								$detailContainer.append(dataContainer);
								product.Plan.datepicker(".table .datepicker");
							});
							$infoShow.html('获取数据成功！').hide(3000);
						}else{
							$infoShow.html('<span style="color:red">获取数据失败，请检查原因！</span>');
						}
					}
				});
			};
		</script>
	</body>
</html>